import React, {Component} from 'react'
import ContentList from './ContentList'
import style from './Content.module.scss'
import {connect} from "react-redux";
import {Button, DatePicker, Form, Input} from 'antd';
import {ProFormSelect} from '@ant-design/pro-form';
import {removeEmptyField} from '../../compoent/emptyFild'
import moment from "moment/moment";

class Content extends Component {
    state = {
        types: [],
        names: [],
        newValues: {}
    };

    componentDidMount() {
        const types = [];
        const names = [];
        this.props.allType()
            .then(r => {

                if (r.data && r.data.length > 0) {
                    r.data.forEach(item => {
                        let option = {};
                        option.value = item.id;
                        option.label = item.typeName;
                        types.push(option)

                    })
                    this.setState({ types})
                }
            })
        this.props.allNames()
            .then(
                r => {
                    if (r.data && r.data.length > 0) {
                        r.data.forEach(item => {
                            let option = {};
                            option.value = item.id;
                            option.label = item.circleName;
                            names.push(option)

                        })
                        this.setState({ names})
                    }
                }
            );

    }

    onFinish = (values) => {
        const beginTime = values.beginTime
        values.beginTime = beginTime ? moment(beginTime[0]).format('YYYY-MM-DD') : ''
        values.endTime = beginTime ? moment(beginTime[1]).format('YYYY-MM-DD') : ''

        if (values) {
            values.page = 1;
            values.size = 10;
            let newValues = removeEmptyField(values)
            this.setState({newValues: newValues})
            this.props.list(newValues)
        } else
            this.props.list()


    };

    render() {
        const {names, types} = this.state;
        console.log("name", names)
        console.log("types", types)
        const {RangePicker} = DatePicker;
        return (
            <div>
                <div className={style.top}>
                    <Form
                        style={{marginTop: 20, marginLeft: 20}}
                        name="basic"
                        layout='inline'
                        // wrapperCol={{ span: 6 }}
                        onFinish={this.onFinish}
                        autoComplete="off"

                    >

                        <Form.Item
                            style={{width: 250}}
                            label="用户昵称："
                            name="nickName"
                        >
                            <Input placeholder='用户昵称'/>
                        </Form.Item>

                        <ProFormSelect options={types} width={250} name="circleTypeId" label='圈子类型'/>

                        <ProFormSelect options={names} width={250} name="circleNameId" label='圈子名称'/>

                        <Form.Item
                            style={{marginTop: 0}}
                            label="开始时间"
                            name="beginTime"
                        >
                            <RangePicker
                                ranges={{
                                    // Today: [moment(), moment()],
                                    '本周': [moment().startOf('week'), moment().endOf('week')],
                                    '本月': [moment().startOf('month'), moment().endOf('month')],
                                }}/>


                        </Form.Item>
                        <Form.Item style={{marginLeft: 0, marginTop: 0}}>

                            <Button type="primary" htmlType='reset' >
                                重置
                            </Button>
                            <Button type="primary" htmlType="submit" style={{marginLeft: 30}}>
                                查询
                            </Button>


                        </Form.Item>
                    </Form>
                </div>
                <div className={style.middle}>
                    <ContentList/>
                </div>

            </div>
        )
    }
}

const mapState = state => ({
    ...state.circleContent

});

const mapDispatch = dispatch => ({
    ...dispatch.circleContent
})

export default connect(mapState, mapDispatch)(Content);